<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
    #userDetail {
        color: #444;
        padding: 0 20px 30px;
        background-color: #fff;
    }

    .header-tip {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
    }

    .message-container {
        border: 1px solid #E6E6E6;
        padding: 20px 26px 0;
        margin-bottom: 30px;
    }

    .message-title {
        height: 62px;
        line-height: 62px;
        font-size: 16px;
    }

    .message-item {
        margin-bottom: 14px;
    }

    .message-tip {
        width: 56px;
        /* margin-right: 20px; */
        height: 34px;
        line-height: 34px;
        /* text-align: right; */
        text-align: justify;
        text-align-last: justify;
    }

    .message-tip-right {
        width: 70px;
        /* margin-right: 20px; */
        text-align: justify;
        text-align-last: justify;
    }

    .message-con {
        flex: 1;
        justify-content: space-between;
    }

    .avatar-img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        margin-right: 20px;
        border: 1px solid #E5E5E5;
    }

    .change-avatar {
        width: 88px;
        height: 32px;
        border: 1px solid #7438D5;
        border-radius: 4px;
        justify-content: center;
        cursor: pointer;
        color: #7438D5;
    }

    .message-money,
    .message-score {
        margin-right: 30px;
    }

    .page-container {
        justify-content: flex-end;
    }

    .table-img {
        width: 16px;
        height: 16px;
    }

    .date-tip {
        margin-left: 20px;
        color: #999;
    }

    .margin-right-20 {
        margin-right: 20px;
    }

    .el-popover {
        left: 46px;
        top: 10px;
        padding: 16px;
    }

    .popover-container>div {
        margin-bottom: 10px;
    }

    .popover-tip {
        width: 56px;
        color: #666;
        text-align: justify;
        text-align-last: justify;
    }

    .el-table th .cell,
    .el-table td .cell {
        display: block;
        line-height: 44px;
    }

    .agent-dialog.el-dialog {
        width: fit-content !important;
    }

    .agent-dialog.el-dialog .el-dialog__body {
        padding: 10px 20px;
    }

    .el-dialog-tip {
        color: #F8A92B;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 14px;
    }

    .el-dialog-search {
        margin-bottom: 14px;
    }

    .parent-agent-header {
        height: 40px;
        background: #F9F9F9;
        border: 1px solid #E6E6E6;
    }

    .parent-agent-header>div {
        text-align: center;
        line-height: 40px;
    }

    .parent-agent-id {
        width: 70px;
        text-align: center;
    }

    .parent-agent-message {
        width: 170px;
        text-align: center;
        padding: 0 10px;
    }

    .parent-agent-message .table-image {
        margin: 0 10px 0 0;
    }

    .parent-agent-body .parent-agent-id,
    .parent-agent-body .parent-agent-message {
        border-right: 1px solid #F7F7F7;
    }

    .parent-agent-phone {
        width: 110px;
        text-align: center;
        position: relative;
    }

    .parent-agent-item {
        height: 44px;
        border-bottom: 1px solid #E6E6E6;
        cursor: pointer;
    }

    .parent-agent-item:last-of-type {
        border: none;
    }

    .parent-agent-body {
        border: 1px solid #E6E6E6;
        border-top: none;
    }

    .parent-agent-search {
        margin-bottom: 14px;
    }

    .agent-refresh {
        position: absolute;
        top: -164px;
        color: #86848B;
        font-weight: 500;
        cursor: pointer;
    }

    .agent-refresh span {
        margin-left: 8px;
    }

    .parent-agent-item-active {
        background: rgba(116, 56, 213, 0.1);
    }

    .table-image {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 10px;
    }

    .parent-user-avatar {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<div id="userDetail" v-cloak>
    <div class="header-tip">
        基本信息
    </div>
    <div class="message-container">
        <el-row :gutter="60" type="flex" align="stretch">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="">
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip">用户头像</div>:
                        </div>
                        <div class="message-date display-flex">
                            <img v-if="data.avatar" class="avatar-img" :src="Fast.api.cdnurl(data.avatar)">
                            <div class="display-flex change-avatar" @click="operation('avatar')">更换头像</div>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip">用户昵称</div>:
                        </div>
                        <div class="message-con display-flex">
                            <el-input v-model="data.nickname" placeholder="请输入用户昵称" size="medium"></el-input>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip-right">来源渠道</div>:
                        </div>
                        <div class="message-con display-flex">
                            <div class="message-money">
                                {{data.user_channel.pid_name}}
                            </div>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip-right">订购产品</div>:
                        </div>
                        <div class="message-con display-flex">
                            <div class="message-money">
                                {{data.user_channel.product_name}}
                            </div>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip-right">手机归属地</div>:
                        </div>
                        <div class="message-con display-flex">
                            <div class="message-money">
                                {{data.user_channel.province||''}}
                                {{data.user_channel.city||''}}
                            </div>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="display-flex margin-right-20">
                            <div class="message-tip">状态</div>:
                        </div>
                        <div class="message-con display-flex">
                            <el-radio-group v-model="data.status">
                                <el-radio :label="1">正常</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                    <div>
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">用户ID</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div class="message-money">
                                    {{data.id}}
                                </div>
                            </div>
                        </div>
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">用户手机</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div class="message-money">
                                    {{data.mobile}}({{data.user_channel.isp||''}})
                                </div>
                            </div>
                        </div>
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">真实姓名</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div :class="{'text-color-gray':data.real_name==''}">
                                    {{data.real_name||'未完善就诊信息'}}
                                </div>
                            </div>
                        </div>
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">身份证号</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div :class="{'text-color-gray':data.real_name==''}">
                                    {{data.id_card||'未完善就诊信息'}}
                                </div>
                            </div>
                        </div>
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">账户余额</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div class="message-money">
                                    {{data.balance}}
                                </div>
                                <!-- <div class="theme-color cursor-pointer" @click="operation('balance')">
                                    充值
                                </div> -->
                            </div>
                        </div>
                        <!-- <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">账户健康币</div>:
                            </div>
                            <div class="message-con display-flex">
                                <div class="message-score">
                                    {{data.virtually_coin}}
                                </div>
                                <div class="theme-color cursor-pointer" @click="operation('score')">
                                    充值
                                </div>
                            </div>
                        </div> -->
                        <div class="message-item display-flex">
                            <div class="display-flex margin-right-20">
                                <div class="message-tip-right">加入时间</div>:
                            </div>
                            <div class="display-flex">
                                {{data.created_at}}
                            </div>
                        </div>
                    </div>
                    <div class="message-item display-flex">
                        <div class="message-con display-flex" style="justify-content: flex-end;">
                            <div class="dialog-define-btn" @click="operation('save')">保存</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <div v-if="logList && activeStatus">
        <div class="display-flex">
            <div class="custom-refresh display-flex-c" @click="getListData(activeStatus)">
                <i class="el-icon-refresh"></i>
            </div>
            <div class="flex-1">
                <el-radio-group v-model="activeStatus" fill="#7536D0" @change="radioChange">
                    {if condition = "$auth->check('health/user/user/balance_log')"}
                    <el-radio-button label="balance_log">余额明细</el-radio-button>
                    {/if}
                    {if condition = "$auth->check('health/user/user/money_log')"}
                    <el-radio-button label="sign_in_record">签到记录</el-radio-button>
                    {/if}
                </el-radio-group>
            </div>
        </div>
        <div class="custom-table-body">
            <el-table ref="multipleTable" :data="logList" tooltip-effect="dark" style="width: 100%" border
                :row-class-name="tableRowClassName">
                <template v-for="(item, index) in columns[activeStatus]">
                    <el-table-column :key="index" :fixed="item.fixed" :prop="item.field" :label="item.title"
                        :align="item.align ? item.align : 'center'" :min-width="item.width">
                        <template slot-scope="scope">
                            <div v-if="item.type=='order'" @click="operation('order',scope.row.id)"
                                class="theme-color cursor-pointer">{{scope.row[item.field]}}</div>
                            <div v-if="item.type=='text'">
                                <span v-if="scope.row[item.field] || scope.row[item.field]==0">
                                    {{scope.row[item.field]}}
                                </span>
                            </div>
                            <div class="display-flex-c" style="width: 100%;" v-if="item.type=='htmls'"
                                v-html="item.formatter(scope.row, item)"></div>

                            <div class="display-flex-c" style="width: 100%;height: 44px;"
                                v-if="item.type=='time' || item.type=='image'" v-html="item.formatter(scope.row, item)">
                            </div>
                            <!-- 分享用户 -->
                            <div class="display-flex-c theme-color cursor-pointer" style="width: 100%;"
                                v-if="item.type=='shareUser'" v-html="item.formatter(scope.row, item)"
                                @click="operation('shareUser',scope.row.user.id)"></div>
                            <!-- 商品信息 -->
                            <div class="display-flex-c theme-color cursor-pointer" style="width: 100%;"
                                v-if="item.type=='shareMessage' && scope.row.type=='goods'"
                                v-html="item.formatter(scope.row, item)"
                                @click="operation(scope.row.type,scope.row[scope.row.type].id)"></div>
                            <!-- 收藏商品,浏览商品 -->
                            <div class="display-flex-c theme-color cursor-pointer" style="width: 100%;"
                                v-if="item.type=='goods'" v-html="item.formatter(scope.row, item)"
                                @click="operation('goods',scope.row.goods.id)"></div>

                            <!-- 拼团 -->
                            <div class="display-flex-c theme-color cursor-pointer" style="width: 100%;"
                                v-if="item.type=='shareMessage' && scope.row.type=='groupon'"
                                v-html="item.formatter(scope.row, item)"
                                @click="operation(scope.row.type,scope.row.id)"></div>

                            <!-- 优惠券 -->
                            <div class="display-flex-c" style="width: 100%;"
                                v-if="item.type=='couponStatus'&& item.formatter(scope.row, item)==0">未使用</div>

                            <div class="display-flex-c theme-color cursor-pointer" style="width: 100%;"
                                v-if="item.type=='couponStatus'&& item.formatter(scope.row, item)==1"
                                @click="operation('order',scope.row.use_order_id)">已使用{{scope.row.user_order_id}}</div>

                            <div v-if="item.type=='price'">{{scope.row[item.field]}}元</div>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="page-container display-flex">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>